<template>
  <div
    v-if="data.length > 0"
    class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-7 py-2 gap-4 md:gap-2 gva-container2"
  >
  <gva-card custom-class="col-span-1 lg:col-span-1 h-32">
      <div class="flex flex-col items-center justify-center h-full">
        <div class="text-lg font-bold mb-2">总访问量</div>
        <div class="text-3xl font-bold text-primary">
          {{ pageViewCount.toLocaleString() }}
        </div>
        <div class="text-sm text-gray-500 mt-2">
          累计访问人次
        </div>
      </div>
    </gva-card>
    <gva-card custom-class="col-span-1 lg:col-span-2 h-32">
      <gva-chart :type="1" title="新增需求数量" :requestData="data[0]" />
    </gva-card>
    <gva-card custom-class="col-span-1 lg:col-span-2 h-32 ">
      <gva-chart :type="2" title="新增订单数量" :orderData="data[1]" />
    </gva-card>
    <gva-card custom-class="col-span-1 lg:col-span-2 h-32">
      <gva-chart :type="3" title="新增用户数量" :userData="data[2]" />
    </gva-card>

    <gva-card
      title="快捷功能"
      show-action
      custom-class="col-start-1 md:col-start-3 lg:col-start-7 row-span-2 h-38"
    >
      <gva-quick-link />
    </gva-card>
    <gva-card
      title="历史数据"
      custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2"
    >
      <gva-chart :type="4" :xAxis="xAxis" :chartsData="chartsData" />
    </gva-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { GvaChart, GvaQuickLink, GvaCard } from "./components";
import {
  getOrderIncInfo,
  getReqIncInfo,
  getUserIncInfo,
  getWeeklyQeqInc,
  getPageViewStats,
} from "@/api/dashboard";

// 定义响应式数据
const data = ref([]);
const xAxis = ref([]);
const chartsData = ref([]);
const pageViewCount = ref(0);

// 在 mounted 生命周期钩子中获取数据
onMounted(async () => {
  try {
    // 获取数据
    const fetchedData = await getReqIncInfo();
    const fetchedData1 = await getOrderIncInfo();
    const fetchedData2 = await getUserIncInfo();
    const fetchedData3 = await getWeeklyQeqInc();
    
    // 获取页面访问统计并格式化显示
    const pageViewData = await getPageViewStats();
    pageViewCount.value = pageViewData?.data?.total || 0;

    // 处理数据
    xAxis.value = fetchedData3?.data?.map((item) => item.week) || [];
    chartsData.value = fetchedData3?.data?.map((item) => item.count) || [];

    // 确保 data 数组被正确赋值
    data.value[0] = fetchedData?.data || {
      value: 0,
      percentage: 0,
      data: null,
    };
    data.value[1] = fetchedData1?.data || {
      value: 0,
      percentage: 0,
      data: null,
    };
    data.value[2] = fetchedData2?.data || {
      value: 0,
      percentage: 0,
      data: null,
    };

    // 检查数据赋值
    console.log("完整的 data：", data.value);
    console.log("data.value[1]：", data.value[1]);
  } catch (error) {
    console.error("数据获取失败", error);
  }
});

</script>

<style lang="scss" scoped>
.text-primary {
  color: var(--el-color-primary);
}
</style>
